{% extends "myadmin/base.html" %}

{% block main_body %}

<!-- 引入必要的外部资源 引入Font Awesome图库 --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    /* 基础动画定义 */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* 页面整体样式 */
    .health-intro-container {
        overflow-x: hidden;
        background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
        padding-bottom: 50px;
    }
    
    /* 标题区域样式 */
    .hero-section {
        text-align: center;
        padding: 60px 20px;
        background: linear-gradient(120deg, #43cea2 0%, #185a9d 100%);
        color: white;
        border-radius: 0 0 50% 50% / 30px;
        position: relative;
        overflow: hidden;
    }
    
    .hero-section::before {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        top: 20%;
        left: 10%;
        animation: float 6s ease-in-out infinite;
    }
    
    .hero-section::after {
        content: '';
        position: absolute;
        width: 150px;
        height: 150px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        bottom: 10%;
        right: 15%;
        animation: float 8s ease-in-out infinite 2s;
    }
    
    .hero-title {
        font-size: 2.8rem;
        margin-bottom: 20px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        position: relative;
        animation: fadeIn 1s ease-out;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto 30px;
        animation: fadeIn 1s ease-out 0.3s forwards;
        opacity: 0;
    }
    
    .diet-icon {
        font-size: 5rem;
        margin-bottom: 20px;
        animation: pulse 3s ease-in-out infinite;
    }
    
    /* 特性卡片样式 */
    .features-section {
        padding: 60px 20px;
    }
    
    .section-title {
        text-align: center;
        margin-bottom: 50px;
        color: #2c3e50;
        font-size: 2rem;
        position: relative;
    }
    
    .section-title::after {
        content: '';
        display: block;
        width: 80px;
        height: 4px;
        background: #43cea2;
        margin: 10px auto;
        border-radius: 2px;
    }
    
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .feature-card {
        background: white;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        animation: fadeIn 0.5s ease-out;
        position: relative;
        overflow: hidden;
    }
    
    .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, #43cea2, #185a9d);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }
    
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    }
    
    .feature-card:hover::before {
        transform: scaleX(1);
    }
    
    .feature-icon {
        font-size: 2.5rem;
        color: #43cea2;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
    }
    
    .feature-card:hover .feature-icon {
        transform: scale(1.1) rotate(5deg);
    }
    
    .feature-title {
        color: #2c3e50;
        margin-bottom: 15px;
        font-size: 1.5rem;
    }
    
    .feature-desc {
        color: #7f8c8d;
        line-height: 1.6;
    }
    
    /* 流程步骤样式 */
    .process-section {
        padding: 60px 20px;
        background: white;
    }
    
    .process-steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .process-step {
        flex: 1;
        min-width: 250px;
        text-align: center;
        position: relative;
        animation: fadeIn 0.5s ease-out;
    }
    
    .step-number {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: bold;
        margin: 0 auto 20px;
        box-shadow: 0 5px 15px rgba(67, 206, 162, 0.3);
        animation: pulse 4s ease-in-out infinite;
    }
    
    /* 强调区域样式 */
    .highlight-section {
        padding: 80px 20px;
        background: linear-gradient(135deg, #185a9d 0%, #43cea2 100%);
        color: white;
        text-align: center;
        margin: 40px 0;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }
    
    .highlight-section::before {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        top: -200px;
        right: -100px;
    }
    
    .highlight-section::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        bottom: -150px;
        left: -50px;
    }
    
    .highlight-text {
        font-size: 1.8rem;
        max-width: 800px;
        margin: 0 auto 30px;
        position: relative;
    }
    
    .cta-button {
        background: white;
        color: #185a9d;
        border: none;
        padding: 15px 40px;
        font-size: 1.1rem;
        font-weight: bold;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        position: relative;
    }
    
    .cta-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        background: #f8f9fa;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .hero-title {
            font-size: 2rem;
        }
        
        .highlight-text {
            font-size: 1.4rem;
        }
    }
</style>

<div class="health-intro-container">
    <!-- 标题区域 -->
    <div class="hero-section">
        <i class="fas fa-leaf diet-icon"></i>
        <h1 class="hero-title">个性化健康饮食推荐系统</h1>
        <p class="hero-subtitle">基于您的身体状况、饮食偏好和健康目标，为您量身定制科学、美味且可持续的饮食方案</p>
    </div>

    <!-- 特性介绍 -->
    <div class="features-section">
        <h2 class="section-title">为什么选择我们的系统？</h2>
        <div class="features-grid">
            <div class="feature-card">
                <i class="fas fa-user-check feature-icon"></i>
                <h3 class="feature-title">精准个性化</h3>
                <p class="feature-desc">通过AI算法分析您的身体数据、饮食习惯和健康目标，生成独一无二的饮食推荐，告别千篇一律的通用食谱。</p>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-flask feature-icon"></i>
                <h3 class="feature-title">科学依据</h3>
                <p class="feature-desc">基于营养学研究和膳食指南，结合中医体质理论，确保推荐方案既科学合理又符合东方饮食习惯。</p>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-sync-alt feature-icon"></i>
                <h3 class="feature-title">动态调整</h3>
                <p class="feature-desc">系统会根据您的身体变化和反馈实时优化推荐方案，始终保持最适合您当前状态的饮食建议。</p>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-utensils feature-icon"></i>
                <h3 class="feature-title">美味多样</h3>
                <p class="feature-desc"> 来自世界各地的数千道食谱，可根据您的口味偏好和营养需求进行调整。</p>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-mobile-alt feature-icon"></i>
                <h3 class="feature-title">随时可用</h3>
                <p class="feature-desc">跨平台支持，手机、平板和电脑随时访问，购物清单自动生成，让健康饮食轻松融入日常生活。</p>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-chart-line feature-icon"></i>
                <h3 class="feature-title">效果追踪</h3>
                <p class="feature-desc">记录您的饮食记录和身体变化，通过数据可视化直观展示健康改善效果，让每一步进步都清晰可见。</p>
            </div>
        </div>
    </div>

    <!-- 使用流程 -->
    <div class="process-section">
        <h2 class="section-title">简单三步，开启健康饮食之旅</h2>
        <div class="process-steps">
            <div class="process-step">
                <div class="step-number">1</div>
                <h3 class="feature-title">完善信息</h3>
                <p class="feature-desc">填写您的身体数据、饮食偏好、过敏食物和健康目标</p>
            </div>
            
            <div class="process-step">
                <div class="step-number">2</div>
                <h3 class="feature-title">获取方案</h3>
                <p class="feature-desc">AI算法实时分析，生成专属于您的个性化饮食推荐</p>
            </div>
            
            <div class="process-step">
                <div class="step-number">3</div>
                <h3 class="feature-title">开始实践</h3>
                <p class="feature-desc">跟随推荐方案饮食，定期反馈，享受健康生活</p>
            </div>
        </div>
    </div>

    <!-- 强调区域 -->
    <div class="highlight-section">
        <p class="highlight-text">无论您是想减重、增肌、改善健康状况，还是仅仅想吃得更科学，我们都能为您提供最合适的饮食方案</p>
        <button  class="cta-button">立即开始 <i class="fas fa-arrow-right ml-2"></i></button>
    </div>
</div>

<script>
    // 滚动动画效果
    document.addEventListener('DOMContentLoaded', () => {
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.feature-card, .process-step');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (elementPosition < windowHeight * 0.85) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };
        
        // 初始设置
        document.querySelectorAll('.feature-card, .process-step').forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = `opacity 0.6s ease-out ${index * 0.1}s, transform 0.6s ease-out ${index * 0.1}s`;
        });
        
        // 初始检查
        animateOnScroll();
        
        // 滚动时检查
        window.addEventListener('scroll', animateOnScroll);
    });
</script>

{% endblock %}